<template>
  <div>
    <div id="myChart" style="width: 100%;height: 400px;"></div>
    <div id="myChart3" style="width: 100%;height: 400px;"></div>
  </div>
</template>
<script>
import echarts from "echarts";
export default {
  name: "Home",
  mounted() {
    this.getData();
  },
  data() {
    return {
      mydata: [],
      mydata2: [],
      cdata:[],
    };
  },
  methods: {
    getData() {
      this.$ajax({
        method: "get",
        url: "/statistics/week"
      })
        .then(res => {
          this.mydata = res.data.data;
          this.$ajax({
            method: "get",
            url: "/statistics/park"
          })
            .then(res => {
              this.mydata2 = res.data.data;
              this.SetEchart();
            })
            .catch(error => {
              alert(error);
              console.log(error);
            });
         
        })
        .catch(error => {
          alert(error);
          console.log(error);
        });
    },
    getDay(date) {
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      return year + "-" + month + "-" + day;
    },
    getParkDate() {
      var parkDate = new Array();
      var curDate = new Date();
      for (var i = 1; i <= 7; i++) {
        var preDate = new Date(curDate.getTime() - i * 24 * 60 * 60 * 1000); //前一天
        var preD = this.getDay(preDate);
        parkDate.push(preD);
      }
      this.cdata=parkDate;
      return parkDate;
    },
    getParkData(data) {
      var seriess = new Array();
      var parkname = new Array();
      for (var i = 0; i < data.length; i++) {
        var parking = data[i];
        parkname.push(parking.title);
        var kk = {
          name: parking.title,
          type: "line",
          data: parking.data,
          markPoint: {
            data: [
              { type: "max", name: "最大值" },
              { type: "min", name: "最小值" }
            ]
          },
          markLine: {
            data: [{ type: "average", name: "平均值" }]
          }
        };
        seriess.push(kk);
      }
      this.mydata=parkname;
      
      return [seriess, parkname];
    },
    SetEchart() {
      let myChart = echarts.init(document.getElementById("myChart"));
     // let myChart2 = echarts.init(document.getElementById("myChart2"));
      let myChart3 = echarts.init(document.getElementById("myChart3"));
      var cdata= this.getParkDate().reverse();
      var data1 = this.getParkData(this.mydata);
      var data2=this.getParkData(this.mydata2);
     
      // 绘制图表
      var option1 = {
        title: {
          text: "各个停车场收入",
         
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: data1[1]
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data:cdata
          }
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              formatter: "{value} "
            }
          }
        ],
        series: data1[0]
      };
     
      var option3 = {
        title: {
          text: "各个停车场的停车数目",
        
        },
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: data2[1]
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar", "stack", "tiled"] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        calculable: true,
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: cdata
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series:data2[0]
      };

      myChart.setOption(option1);
     // myChart2.setOption(option2);
      myChart3.setOption(option3);
    }
  }
};
</script>
<style>
</style>
